<template>
  <div v-if="loading" style="color: #fff">图表加载中...</div>
  <div id="chart" style="width: 100%; height: 400px" v-else></div>
</template>

<script>
//import echarts from 'echarts'
import * as echarts from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'

import { BarChart, LineChart } from 'echarts/charts'

import { TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'

echarts.use([BarChart, CanvasRenderer, LineChart, TooltipComponent, LegendComponent, GridComponent])

export default {
  name: 'MixedChart',
  data() {
    return {
      chart: null,
      loading: false,
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    initChart() {
      try {
        this.chart = echarts.init(document.getElementById('chart'))

        const option = {
          backgroundColor: '#1e3c7c', // 背景色
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
              },
            },
          },
          legend: {
            data: ['不良行为', '关爱活动'],
            top: '10%',
            textStyle: {
              color: '#fff',
            },
          },
          grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
              axisLabel: {
                color: '#fff',
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                color: '#fff',
                formatter: '{value}%', // 如果需要百分比
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)',
                },
              },
            },
          ],
          series: [
            {
              name: '不良行为',
              type: 'bar',
              stack: 'total',
              barWidth: '30%',
              itemStyle: {
                color: '#f56c6c',
              },
              data: [2, 5, 3, 0.5, 30, 15, 5, 0, 0.5, 0, 0, 0], // 示例数据
            },
            {
              name: '关爱活动',
              type: 'bar',
              stack: 'total',
              itemStyle: {
                color: '#67c23a',
              },
              data: [1, 8, 12, 0.2, 10, 20, 20, 0, 10, 0, 0, 0], // 示例数据
            },
            {
              name: '趋势线',
              type: 'line',
              symbol: 'circle',
              symbolSize: 8,
              lineStyle: {
                color: '#e6a23c',
                width: 2,
              },
              itemStyle: {
                color: '#e6a23c',
              },
              data: [1.25, 15, 45, 15, 85, 60, 45, 30, 15, 5, 2, 0.5], // 示例数据，对应折线
            },
          ],
        }

        this.chart.setOption(option)

        // 响应式调整
        window.addEventListener('resize', this.handleResize)
      } catch (error) {
        console.error('Error initializing chart:', error)
        this.loading = false
      }
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize()
      }
    },
  },
}
</script>

<style scoped>
/* 可以添加一些自定义样式 */
</style>
